<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>操作属性的方法--tab栏切换</title>
		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			.box{
				width: 400px;
				height: 300px;
				border: 1px solid #ccc;
				margin: 100 auto;
			}
			.hd{
				height: 45px;
			}
			.hd span{
				display: inline-block;
				width: 90px;
				background-color: pink;
				text-align: center;
				line-height: 45px;
				height: 45px;
			}
			.hd .current{
				background-color: purple;
			}
			
			.content li{
				height: 255px;
				background-color: purple;
				display: none;
			}
			.content ul .current{
				display: block;
			}
		</style>
	</head>
	<body>
		
		<div class="box" id="box">
			<div class="hd">
				<span class="current">体育</span>
				<span>娱乐</span>
				<span>新闻</span>
				<span>综合</span>
				
			</div>
			<div class="content">
				<ul>
					<li class="current" >体育模块</li>
					<li>娱乐模块</li>
					<li>新闻模块</li>
					<li>综合模块</li>
					
				</ul>
			</div>
		</div>
		
		<script type="text/javascript">
			var spans = document.getElementsByTagName("span");
			var lis = document.getElementsByTagName("li");
			
			for (var i = 0; i<spans.length; i++) {
				spans[i].onclick = fn;
			}
			
			function fn(){
				for (var i=0;i<spans.length;i++) {
					spans[i].setAttribute("index",i)
					spans[i].removeAttribute("class");
				}
				this.setAttribute("class","current");
				
				for (var i=0;i<lis.length;i++) {
					lis[i].removeAttribute("class");
				}
				var index = this.getAttribute("index");
				lis[index].setAttribute("class","current");
			}
		</script>
	</body>
</html>
